import React, { Component } from 'react'
import Tab from './components/Tab'
import Form from './components/Form'
import List from './components/List'

export default class App extends Component {
  state = {
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'time',
  }
  // 子改父
  // !#1. 父组件准备方法并传递给子组件
  changeActive = (active) => {
    // !#3 根据拿到的参数修改数据
    this.setState({ active })
  }
  render() {
    const { tabs, active } = this.state
    return (
      <div className='App'>
        <div className='comment-container'>
          <div className='comment-head'>
            <span>1 评论</span>
          </div>
          {/* Tab */}
          <Tab tabs={tabs} active={active} changeActive={this.changeActive} />
          {/* Form */}
          <Form />
          {/* List */}
          <List />
        </div>
      </div>
    )
  }
}
